<template>
  <div>
    <div class="log-container">
      <ButtonGroup
        v-if="showBtn"
        :options="topButton"
        class="button-container"
        @click="handleButtonClick"
      />
      <MainTableList
        :columns="columns"
        :data-source="dataSource"
        :row-selection="getRowSelection"
        :loading="loading"
        :pagination="false"
        :scroll="getScroll"
        slot-name="atthName"
        @number-click="handleNumberClick"
      />
      <DialogUploadCustomer
        ref="upload"
        uptype="customer"
        :list.sync="list"
        :accept="accept"
        :biz-id="code"
        @change="handleInsertChange"
      />
    </div>
  </div>
</template>

<script>
import MainTableList from './mainTableList.vue';
import { postFJListByPage, postFJdelete } from '@/api/customerApi.js';
import mixinTable from '@/mixins/mixin-table.js';
import DialogUploadCustomer from '@/components/dialog/DialogUploadCustomer.vue';
export default {
  components: {
    DialogUploadCustomer,
    MainTableList,
  },
  mixins: [mixinTable],
  props: {
    code: {
      type: [String, Number],
      default: '',
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    rowSelection: {
      type: Object,
      default: () => {},
    },
    keyTabs: {
      type: String,
      default: '6',
    },
  },
  data() {
    return {
      accept: [
        // '.txt',
        '.pdf',
        '.doc',
        '.docx',
        '.xls',
        '.xlsx',
        '.ppt',
        '.pptx',
        '.jpg',
        '.png',
        // '.bmp',
        '.gif',
        'jpeg',
        '.rar',
        '.zip',
        // '.avi',
        // '.mp4',
        // '.rmvb',
        '.wps',
      ],
      list: [],
      loading: false,
    };
  },
  computed: {
    getScroll() {
      return this.showBtn ? { x: '100%', y: '53vh' } : { x: '100%', y: 300 }
    },
    getRowSelection() {
      return this.showBtn ? this.rowSelectionMixin : this.rowSelection
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '附件名称',
          ellipsis: true,
          dataIndex: 'atthName',
          scopedSlots: { customRender: 'atthName' },
        },
        {
          align: 'center',
          title: '部门',
          ellipsis: true,
          dataIndex: 'createUserDeptName',
        },
        {
          align: 'center',
          title: '上传人姓名',
          ellipsis: true,
          dataIndex: 'updateUserName',
        },
        {
          align: 'center',
          title: '上传时间',
          ellipsis: true,
          dataIndex: 'updateTime',
        },
      ];
      return columns;
    },
    topButton() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'relevance',
          type: 'primary',
          label: '上传附件',
          icon: 'plus',
        },
        {
          key: 'delete',
          label: '删除',
          icon: 'delete',
          disabled,
        },
      ];
    },
  },
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '6' && this.getList();
      },
      immediate: true,
    }, 
  },
  created() {
    // this.getList();
  },
  methods: {
    handleInsertChange() {
      this.getList();
    },
    async getList() {
      this.loading = true;
      const result = await postFJListByPage({
        bizId: this.code,
        bizType: 'customer',
      }).finally(() => (this.loading = false));
      this.dataSource = result?.data?.data || [];
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    relevanceCallback() {
      this.$refs.upload?.uploader();
    },
    async deleteCallback() {
      const selectedRowKeys = this.rowSelectionMixin.selectedRowKeys || [];
      // const checkedRows = this.dataSource.reduce((pre, cur) => {
      //   if (selectedRowKeys.includes(cur.id)) {
      //     pre.push(cur);
      //   }
      //   return pre;
      // }, []);
      // const ids = checkedRows.map(item => item.id);

      // if (!ids.length) {
      //   this.$message.info(`请选择要删除的附件，现有 ${ids.length} 条！`);
      //   return;
      // }
      try {
        await this.$confirm(
          `是否删除该附件？共 ${selectedRowKeys.length} 条，是否确认？`
        );
        await postFJdelete(selectedRowKeys);
        this.$message.success('删除成功');
        this.rowSelectionMixin.selectedRowKeys = [];
        this.getList();
      } catch (error) {
        // console.log(error);
      }
    },
    // 编号点击
    handleNumberClick(record) {
      console.log('record:', record);
      window.open(record.atthAccessPath);
    },
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
.item-container {
  display: flex;
  align-items: center;
}
.button-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 40px;
}
/deep/ .poros-select-selection {
  border: none;
}
</style>
